<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>阻止事件的默认行为</title>
</head>
<body>
<div id="change" class="change">
    <a href="https://www.baidu.com" data-on:click.prevent="hrefclicked">有问题，百度一下</a>
</div>

<script>
    function hrefclicked() {
        console.log("点击了 超链接");
    }

    function event_handling(element) {
        // 获取该元素所有的属性
        let attributeNames = element.getAttributeNames();

        for (let i = 0; i < attributeNames.length; i++) {
            if (attributeNames[i].indexOf("data-on:") !== -1) {
                let start = attributeNames[i].indexOf(":");
                let end = attributeNames[i].indexOf(".");

                let event_name = null

                let modifier = null
                if (end === -1) {
                    event_name = attributeNames[i].substring(start + 1);
                } else {
                    event_name = attributeNames[i].substring(start + 1, end);
                    modifier = attributeNames[i].substring(end + 1);
                }

                let event_func = element.getAttribute(attributeNames[i]);
                console.log(event_func);
                console.log(event_name);
                console.log(modifier);

                element.addEventListener(event_name, function (event) {
                    eval(event_func + "()")

                    // event.preventDefault()
                    //
                    // if (modifier === "stop") {
                    //     event.stopPropagation()
                    // }

                    switch (modifier) {
                        case 'stop':
                            event.stopPropagation()
                            break
                        case 'prevent':
                            event.preventDefault()
                            break
                        default:
                            break

                    }


                })

                element.removeAttribute(attributeNames[i])
            }
        }
    }

    let element = document.querySelector("#change a");

    event_handling(element)


</script>
</body>
</html>